import React, { Component } from "react";
import { Link, Route, Switch, withRouter } from "react-router-dom";
// withRouter是一个高阶组件，目的是让普通组件拥有路由信息

class Home extends Component {
  render() {
    return <div>home页面</div>;
  }
}

class About extends Component {
  render() {
    console.log(this);
    return <div>about页面</div>;
  }
}

// const About2 = () => <About />;

// const About = (props) => {
//   console.log(props);
//   return <div>about页面</div>;
// };

class Mine extends Component {
  render() {
    return <div>mine页面</div>;
  }
}

// @withRouter
// class Show extends Component {
//   render() {
//     console.log(this.props);
//     return <div>演出页面</div>;
//   }
// }
const Show = withRouter((props) => {
  console.log(props);
  return <div>演出页面</div>;
});

class App extends Component {
  render() {
    return (
      <>
        <h3>react-router-渲染方式</h3>
        <ul>
          <li>
            <Link to="/home">home</Link>
          </li>
          <li>
            <Link to="/about">about</Link>
          </li>
          <li>
            <Link to="/mine">mine</Link>
          </li>
          <li>
            <Link to="/show">show</Link>
          </li>
        </ul>

        <hr />

        <Switch>
          {/* 在Route组件里面，需要使用component属性来渲染组件 */}

          {/* 除了component以外，还可以使用render的属性来渲染 */}
          {/* render属性只能渲染函数组件，但是不能直接渲染类组件 */}

          {/* 还有使用children的属性，也可以渲染组件 */}
          {/* 如果没有Switch组件，不管url是否匹配，组件都会被渲染 */}
          {/* 如果有Switch组件，它的效果跟render完全相同 */}

          {/* 直接通过插槽的方式渲染组件 */}
          {/* 不能直接拿到路由信息 */}

          <Route path="/home" component={Home}></Route>
          <Route
            path="/about"
            render={(props) => {
              // 可以写函数，可以在这里写逻辑判断
              return <About {...props} />;
            }}
          ></Route>
          <Route path="/mine" children={() => <Mine />}></Route>
          <Route path="/show">
            <Show />
          </Route>
        </Switch>
      </>
    );
  }
}

export default App;
